<script type="text/javascript" src="src/js/echarts.min.js"></script>
<link rel="stylesheet" type="text/css" href="src/css/view/dashboard.css">

<div class="layui-col-md3">
  <!-- 填充内容 -->
  <div class="layui-card" style="height:140px;">
    <div class="layui-card-header">
      系统选择
      <div class="layui-card-setting"><i class="layui-icon layui-icon-set-fill"></i></div>
    </div>
    <div class="layui-card-body">
      <div class="sys-select">
        <form class="layui-form" action="">
            <select name="system" lay-verify="system" lay-filter="system"></select>
        </form>
      </div>
      <div class="sys-text">
        设备总数量<span class="total-count layui-badge layui-bg-black">0</span>
      </div>
    </div>
  </div>
</div>
<div class="layui-col-md5">
  <div class="layui-card" style="height:140px;">
    <div class="layui-card-header">快捷入口</div>
    <div class="layui-card-body">
      <div class="fast-wrap">
        <div class="fast-icon layui-icon layui-icon-edit" style="font-size: 30px; color: #666;"></div>
        <div class="fast-text">故障登记</div>
      </div>
      <div class="fast-wrap">
        <div class="fast-icon layui-icon layui-icon-edit" style="font-size: 30px; color: #666;"></div>
        <div class="fast-text">维修登记</div>
      </div>
      <div class="fast-wrap">
        <div class="fast-icon layui-icon layui-icon-edit" style="font-size: 30px; color: #666;"></div>
        <div class="fast-text">出入库登记</div>
      </div>
      <div class="fast-wrap">
        <div class="fast-icon layui-icon layui-icon-edit" style="font-size: 30px; color: #666;"></div>
        <div class="fast-text">更换登记</div>
      </div>
    </div>
  </div>
</div>
<div class="layui-col-md4">
  <div class="layui-card" style="height:140px;">
    <div class="layui-card-header">用户信息</div>
    <div class="layui-card-body">
      <table class="layui-table" lay-size="sm">
        <colgroup>
          <col width="100">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <td>系统权限</td>
            <td class="usr-role"></td>
          </tr>
          <tr>
            <td>注册日期</td>
            <td class="usr-join"></td>
          </tr>
        </tbody>
      </table>
    
    </div>
  </div>
</div>
<div class="layui-col-md8">
  <div class="layui-card">
    <div class="layui-card-header">设备趋势</div>
    <div class="layui-card-body">
      <div id="chart-monitoring" style="height:250px;"></div>
    </div>
  </div>
</div>
<div class="layui-col-md4">
  <div class="layui-card">
    <div class="layui-card-header">未定</div>
    <div class="layui-card-body">
      <div id="chart-fault" style="height:250px;"></div>
    </div>
  </div>
</div>

<div class="layui-col-md4">
  <div class="layui-card">
    <div class="layui-card-header">设备状态</div>
    <div class="layui-card-body">
      <div id="chart-backup" style="height:300px;"></div>
    </div>
  </div>
</div>
<div class="layui-col-md4">
  <div class="layui-card">
    <div class="layui-card-header">老旧情况</div>
    <div class="layui-card-body">
      <div id="chart-old" style="height:300px;"></div>
    </div>
  </div>
</div>

<div class="layui-col-md4">
  <div class="layui-card">
    <div class="layui-card-header">系统公告</div>
    <div class="layui-card-body bing-notice" style="height:300px;margin-bottom:15px;">
      <ul class="layui-timeline">
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">系统极速开发中</h3>
            <p>我们已经独立开发完成的作品有：</p>
            <ul>
              <li>设备管理系统 (C# + Oracle) 开发中...</li>
              <li>通讯录系统 (PHP + MySQL/Oracle)</li>
              <li>数据库日检查程序 (Python + ExcelVBA)</li>
              <li>整车工厂MES系统 (PHP + MySQL)</li>
            </ul>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">系统立项</h3>
            <p>
              系统正式立项，使用C#、Oracle开发。
              <br>架构：ZhangPeng、BingZhe
              <br>码农：BingZhe
            </p>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
          <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">过去</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
<script>
var access_token = sessionStorage.access_token;
var userId = sessionStorage.userid;
if(sessionStorage.role == 1){
  $('.usr-role').text('普通用户');
}else if(sessionStorage.role == 2){
  $('.usr-role').text('管理员');
}
$('.usr-join').text(sessionStorage.joindate);

//页面效果
$(".fast-wrap").hover(function(){
  $(this).children().css("color","#1E9FFF");
},function(){
  $(this).children().css("color","#666");
});


layui.use(['form'], function(){
  var form = layui.form;

  var selectData;
  //获取select选项
  $.ajax({
    url: 'actionApi/Stn/select',
    type:'post',
    data:{"userId":userId},
    headers:{"Authorization":"Basic "+access_token},
    success:function(res){
      selectData = res.data;
      var systemList = selectData.system;
      for(var key in systemList){
        $('select[name="system"]').append('<option value="'+key+'">'+systemList[key]+'</option>');
      }
      form.render('select');
      initSystem(); //图表初始化
      
    }
  });
  
  form.on('select', function(data){
    initSystem(); //图表初始化
  });
});

function initSystem(){
  

  chartMonitoringShow();   //显示监控图

  getchartBackupData();   //显示设备状态图
  getChartOldData();   //显示老旧情况图

}

//获取设备状态图表数据
function getchartBackupData(){
  var systemId = $('select[name="system"]').val();  //获取系统ID
  $.ajax({
    url: 'actionApi/Dashboard/chartBackup',
    type:'post',
    data:{
      "systemId":systemId,
    },
    headers:{"Authorization":"Basic "+access_token},
    success:function(res){
      if(res.code==0){
        var fixCount = res.data.FIX_COUNT;
        var errCount = res.data.ERR_COUNT;
        var bakCount = res.data.BAK_COUNT;
        var useCount = res.data.USE_COUNT;
        chartBackupShow(fixCount,errCount,bakCount,useCount);
        var totalCount = parseInt(fixCount) + parseInt(errCount) + parseInt(bakCount) + parseInt(useCount);
        $('.total-count').text(totalCount);
      }

    }
  });

}

//获取老旧图表数据
function getChartOldData(){
  var systemId = $('select[name="system"]').val();  //获取系统ID
  var oldBenchmark = '5';
  $.ajax({
    url: 'actionApi/Dashboard/chartOld',
    type:'post',
    data:{
      "systemId":systemId,
      "oldBenchmark":oldBenchmark,
    },
    headers:{"Authorization":"Basic "+access_token},
    success:function(res){
      if(res.code==0){
        var oldCount = res.data.OLD_COUNT;
        var overCount = res.data.SERVICE_COUNT;
        var underCount = res.data.OK_COUNT;
        chartOldShow(oldCount,overCount,underCount);
      }

    }
  });

}

//监控图方法
function chartMonitoringShow(){
  var chartMonitoring = echarts.init(document.getElementById('chart-monitoring'));
  var dateData = [];
  var devCount = [];
  var bakCount = [];
  var errCount = [];
  var fixCount = [];
  for(i=1;i<=31;i++){
    dateData.push('2018-9-'+i);
    devCount.push(600+Math.random()*100);
    bakCount.push(100*Math.random());
    errCount.push(100*Math.random());
    fixCount.push(100*Math.random());
  }
  
  var option = {
      title: {
          text: ''
      },
      tooltip : {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#6a7985'
              }
          }
      },
      legend: {
        data:['正常','备件','故障','维修中']
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis : [
          {
              type : 'category',
              boundaryGap : false,
              data : dateData
          }
      ],
      yAxis : [
          {
              type : 'value'
          }
      ],
      dataZoom: {
        show : true,
        startValue: '2018-9-24',
        type: 'inside'
      },
      series : [
          {
              name:'正常',
              type:'line',
              stack: '总量',
              symbol:"none",
              color: '#0092FF',
              areaStyle: {color: '#0092FF'},    // 堆叠面积样式
              lineStyle: {color: '#0092FF'},    // 线条样式
              data:devCount
          },
          {
              name:'备件',
              type:'line',
              stack: '总量',
              symbol:"none",
              color: '#EBA954',
              areaStyle: {color: '#EBA954'},    // 堆叠面积样式
              lineStyle: {color: '#EBA954'},    // 线条样式
              data:bakCount
          },
          {
              name:'故障',
              type:'line',
              stack: '总量',
              symbol:"none",
              color: '#D74E67',
              areaStyle: {color: '#D74E67'},    // 堆叠面积样式
              lineStyle: {color: '#D74E67'},    // 线条样式
              data:errCount
          },
          {
              name:'维修中',
              type:'line',
              stack: '总量',
              symbol:"none",
              color: '#D48265',
              areaStyle: {color: '#D48265'},    // 堆叠面积样式
              lineStyle: {color: '#D48265'},    // 线条样式
              data:fixCount
          },
      ]
  };
  // 使用刚指定的配置项和数据显示图表。
  chartMonitoring.setOption(option);
}


//备件情况图方法
function chartBackupShow(fixCount,errCount,bakCount,useCount){
  var chartBackup = echarts.init(document.getElementById('chart-backup'));
  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: 'vertical',
      x: 'right',
      itemWidth: 14,
      itemHeight: 14,
      align: 'left',
      data: ['在用', '备件', '故障','维修' ],
      textStyle: {
        color: '#555'
      }
    },
    series: [
      {
        type: 'pie',
        hoverAnimation: false,
        legendHoverLink: false,
        radius: ['40%', '42%'],
        color: ['#3077b7','#9a8169','#915872','#B65F42'],
        label: {
          normal: {
            position: 'inner'
          }
        },
        labelLine: {
          normal: {
            show: false
          },
        },
        tooltip: {
          show: false,
        },
        data: [
          {
            value: useCount,
            name: ''
          },
          {
            value: bakCount,
            name: ''
          },
          {
            value: errCount,
            name: ''
          },
          {
            value: fixCount,
            name: ''
          },
        ]
      },
      {
        name: '统计',
        type: 'pie',
        radius: ['42%', '55%'],
        color: ['#0092ff','#eba954','#d74e67','#D48265' ],
        label: {
          normal: {
            formatter: '{b}\n{d}%'
          },

        },
        data: [
          {
            value: useCount,
            name: '在用'
          },
          {
            value: bakCount,
            name: '备件'
          },
          {
            value: errCount,
            name: '故障'
          },
          {
            value: fixCount,
            name: '维修'
          },
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  chartBackup.setOption(option);
}

//老旧率情况图方法
function chartOldShow(oldCount,overCount,underCount){
  var chartOld = echarts.init(document.getElementById('chart-old'));
  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: 'vertical',
      x: 'right',
      itemWidth: 14,
      itemHeight: 14,
      align: 'left',
      data: ['在保','过保','老旧'],
      textStyle: {
        color: '#555'
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        hoverAnimation: false,
        legendHoverLink: false,
        radius: ['40%', '42%'],
        color: ['#3077b7','#9a8169','#915872'  ],
        label: {
          normal: {
            position: 'inner'
          }
        },
        labelLine: {
          normal: {
            show: false
          },
        },
        tooltip: {
          show: false,
        },
        data: [
          {
            value: underCount,
            name: ''
          },
          {
            value: overCount,
            name: ''
          },
          {
            value: oldCount,
            name: ''
          },
        ]
      },
      {
        name: '统计',
        type: 'pie',
        radius: ['42%', '55%'],
        color: ['#0092ff','#eba954','#d74e67' ],
        label: {
          normal: {
            formatter: '{b}\n{d}%'
          },

        },
        data: [
          {
            value: underCount,
            name: '在保'
          },
          {
            value: overCount,
            name: '过保'
          },
          {
            value: oldCount,
            name: '老旧'
          }

        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  chartOld.setOption(option);
}



</script>